<template>
  <div class="consultReview">
    <div class="content">
      <el-button class="button" @click="initiateVisible = true">发起会商会审</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="indexMethod" label="序号" width="80"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="200"> </el-table-column>
        <el-table-column prop="reason" label="发起原因"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="200"> </el-table-column>
        <el-table-column prop="content" label="会商会审纪要"> </el-table-column>
        <el-table-column prop="status" label="会议状态">
          <template slot-scope="scope">
            <div class="stateTwo" v-if="scope.row.status == 0 || scope.row.status == 1">进行中</div>
            <div class="stateThree" v-else-if="scope.row.status == 2">已完成</div>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0 || scope.row.status == 1">
              <span class="end" @click="endConsult(scope.row.id)">结束</span>
            </div>
            <div v-if="scope.row.status == 2">
              <span class="upload pa-mr-2" @click="checkDetail(scope.row.id)">查看详情</span>
              <span class="upload" @click="upload(scope.row.id)">上传纪要</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <initiate-consult :initiateVisible.sync="initiateVisible" :projectId="projectId" @refresh="getConsult" />
    <upload-summary :uploadVisible.sync="uploadVisible" :consultId="consultId" @refresh="getConsult" />
    <consult-detail :detailVisible.sync="detailVisible" :detailId="detailId" />
  </div>
</template>
<script>
import initiateConsult from './components/initiateConsult.vue'
import uploadSummary from './components/uploadSummary.vue'
import consultDetail from './components/consultDetail.vue'
import { getConsultApi, endConsultApi } from '@/api/manageApi.js'
export default {
  components: {
    initiateConsult,
    uploadSummary,
    consultDetail
  },
  data() {
    return {
      tableData: [],
      total: 0,
      current: 1,
      pageSize: 10,
      initiateVisible: false,
      uploadVisible: false,
      detailVisible: false,
      consultId: '',
      projectId: '',
      detailId: ''
    }
  },
  beforeRouteEnter: (to, from, next) => {
    to.meta.title = to.query.name + '会商会审'
    next()
  },
  mounted() {
    if (this.$route.query) {
      this.projectId = this.$route.query.projectId
    }
    this.getConsult()
  },
  methods: {
    indexMethod(index) {
      return index < 10 ? '0' + (index + 1) : index + 1
    },
    upload(id) {
      this.consultId = id
      this.uploadVisible = true
    },
    checkDetail(id) {
      this.detailId = id
      this.detailVisible = true
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getConsult()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getConsult()
    },
    getConsult() {
      getConsultApi({
        pageNo: this.current,
        pageSize: this.pageSize,
        projectId: this.projectId
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    endConsult(id) {
      endConsultApi({
        id
      }).then(res => {
        if (res.code == 0) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.getConsult()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.consultReview {
  .content {
    width: 100%;
    height: 817px;
    background: #ffffff;
    box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
    border-radius: 24px;
    .button {
      width: 166px;
      height: 41px;
      background: #4880ff;
      border-radius: 5px;
      color: #fff;
      font-size: 21px;
      padding: 0;
      margin: 42px 0 0 48px;
    }
    .stateTwo {
      width: 64px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #fefadb;
      border: 1px solid #d8c62a;
      border-radius: 18px;
      font-size: 14px;
      color: #d8c62a;
    }
    .stateThree {
      width: 64px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: #eeffef;
      border: 1px solid #25bb36;
      border-radius: 18px;
      font-size: 14px;
      color: #25bb36;
    }
    .upload {
      font-size: 14px;
      color: #3f8cff;
      cursor: pointer;
    }
    .end {
      font-size: 14px;
      color: #ff3f3f;
      cursor: pointer;
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 33px;
    }
  }
}
</style>
